var ph = document.querySelector("#ph");
var phone = document.querySelector("#phone");
var re = document.querySelector("#re");
var red = document.querySelector("#red");
var pa = document.querySelector("#pa");
var parts = document.querySelector("#parts");
var aaa = document.querySelector(".aaa");
ph.addEventListener("mouseover", function () {
    phone.style.top = "80px";
    red.style.top = "-185px";
    parts.style.top = "-185px"
});

phone.addEventListener("mouseleave", function () {
    phone.style.top = "-185px"
});

re.addEventListener("mouseover", function () {
    red.style.top = "80px";
    phone.style.top = "-185px";
    parts.style.top = "-185px"
});

red.addEventListener("mouseleave", function () {
    red.style.top = "-185px"
});

pa.addEventListener("mouseover", function () {
    parts.style.top = "80px";
    phone.style.top = "-185px"
    red.style.top = "-185px"
});

parts.addEventListener("mouseleave", function () {
    parts.style.top = "-185px"
});



var nav = document.querySelectorAll("#side li");
var main = document.querySelectorAll("#menu .xxk");
var box =document.querySelector("#box");

for (var i = 0; i<nav.length;i++){
    nav[i].index = i;
    nav[i].addEventListener('mouseover',function () {
        for (var k = 0;k<nav.length;k++){
            nav[k].classList.remove('active');
            main[k].classList.remove('active')
        }
        this.classList.add('active');
        main[this.index].classList.add('active')
    });
    box.addEventListener('mouseleave',function () {
        for (var k = 0;k<nav.length;k++){
            nav[k].classList.remove('active');
            main[k].classList.remove('active')
        }
    })
}



var span1 = document.querySelector("#span1");
var col1 = document.querySelector("#col-1");
var vdo1 = document.querySelector("#video1");
var video1 = document.querySelector("#video1 video");

col1.addEventListener("click", function () {
    vdo1.style.display = "block";
    console.log(video1);
    video1.play();
});

span1.addEventListener("click", function () {
    vdo1.style.display = "none";
    video1.pause();
});

var span2 = document.querySelector("#span2");
var col2 = document.querySelector("#col-2");
var vdo2 = document.querySelector("#video2");
var video2 = document.querySelector("#video2 video");

col2.addEventListener("click", function () {
    vdo2.style.display = "block";
    console.log(video1);
    video2.play();
});

span2.addEventListener("click", function () {
    vdo2.style.display = "none";
    video2.pause();
});

var span3 = document.querySelector("#span3");
var col3 = document.querySelector("#col-3");
var vdo3 = document.querySelector("#video3");
var video3 = document.querySelector("#video3 video");

col3.addEventListener("click", function () {
    vdo3.style.display = "block";
    console.log(video1);
    video3.play();
});

span3.addEventListener("click", function () {
    vdo3.style.display = "none";
    video3.pause();
});

var span4 = document.querySelector("#span4");
var col4 = document.querySelector("#col-4");
var vdo4 = document.querySelector("#video4");
var video4 = document.querySelector("#video4 video");

col4.addEventListener("click", function () {
    vdo4.style.display = "block";
    console.log(video1);
    video4.play();
});

span4.addEventListener("click", function () {
    vdo4.style.display = "none";
    video4.pause();
});


